<template>
  <div style="height: 100%;background-color:white ;">
    <el-row>
      <el-col :span="24" style="right: auto">
        <OfficialSearch ref="officialSearch" :bookSubTagList="bookSubTagList"
                        @advanceConfirm="refreshTableData"></OfficialSearch>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="officialTableData" :height="tableHeight" border highlight-current-row stripe
                style="width: 100%;">
        <el-table-column label="图书名称" min-width="350" prop="name">
          <template slot-scope="scope">
            <span v-html="scope.row.name"></span>
          </template>
        </el-table-column>
        <el-table-column label="图书类型" min-width="120" prop="name">
          <template slot-scope="scope">
            <span v-html="CONST.BOOK_TYPE.find(item => item.value === scope.row.bookType).label"></span>
          </template>
        </el-table-column>
        <el-table-column label="图书分类" min-width="150" prop="categoryStr"></el-table-column>
        <el-table-column label="书号" min-width="150" prop="isbn"></el-table-column>
        <el-table-column label="版本号" min-width="150" prop="version"></el-table-column>
        <el-table-column label="发布时间" min-width="150" prop="updatedTime"></el-table-column>
        <el-table-column :show-overflow-tooltip="false" label="操作" min-width="280">
          <template slot-scope="scope">
            <span v-if="scope.row.bookType !== 2"><el-link @click.prevent="detail(scope.row.id)">详情</el-link></span>
            <span v-if="scope.row.bookType !== 2"><el-link
              @click.prevent="showMetadata(scope.row.id,scope.$index)">元数据</el-link></span>
            <span v-if="scope.row.bookType !== 0"><el-link
              @click.prevent="showIncreaseMetadata(scope.row.id,scope.$index)">增值元数据</el-link></span>
            <span><el-link @click.prevent="logShow(scope.row.id,scope.row.name)">查看日志</el-link></span>
            <span><el-link :style="{ display:editEnable }" @click.prevent="cancel(scope.row.id)">取消发布</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div>
        <el-pagination
          :total="totalNum"
          :page-size="pageSize"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          background
          layout="total, sizes, prev, pager, next, jumper"
          v-if="multiplePages"
          style="text-align: right;"></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
import OfficialSearch from "./OfficialSearch";

export default {
  components: {
    OfficialSearch
  },
  props: ['showStatus'],
  data() {
    return {
      tableRowStyle: '',
      tableHeight: '',
      officialTableData: [],
      multiplePages: true,
      noData: true,
      totalNum: 0,
      currentPage: 1, // 第几页
      pageSize: 10, // 每页显示的数据个数
      name: '',
      category: [],
      updateTime: '',
      ISBN: '',
      bookSubTagList: [],
      editEnable: ''
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //分页
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.getTableData();
    },
    refreshTableData(nv, totalNum, name, category, updateTime, ISBN) {
      this.officialTableData = nv
      this.totalNum = totalNum
      this.name = name
      this.category = category
      this.updateTime = updateTime
      this.ISBN = ISBN
      this.version = version
    },
    logShow: function (id, name) {
      this.$router.push({
          path: '/bookLog',
          query: {id: id, name: name}
        }
      )
    },
    showMetadata: function (id, index) {
      this.$router.push({
          path: '/showMetadata',
          query: {
            id: id,
            metadata: this.officialTableData[index].metadata,
            categoryStr: this.officialTableData[index].categoryStr
          }
        }
      )
    },
    showIncreaseMetadata: function (id, index) {
      this.$router.push({
          path: '/showIncreaseMetadata',
          query: {
            formData: this.officialTableData[index].metadata.increase
          }
        }
      )
    },
    detail: function (id) {
      this.$router.push({
          path: '/bookDetail',
          query: {id: id}
        }
      )
    },
    cancel: function (id) {
      this.$confirm('确定取消发布？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get('/pmph/action/book/cancelRelease', {
          params: {
            id: id,
          }
        }).then(() => {
          this.getTableData();
          this.$emit("cancelReleased")
        })
      })
    },
    getTableData: function () {
      this.axios.get('/pmph/action/book/selectOfficialList', {
        params: {
          currentPage: this.currentPage,
          pageNum: this.pageSize,
          name: this.name,
          category: JSON.stringify(this.category),
          updateTime: this.updateTime.toString(),
          ISBN: this.ISBN,
          version: this.version
        }
      }).then((response) => {
        this.noData = response.data.totalNum <= 0;
        this.officialTableData = response.data.records;
        this.totalNum = response.data.total;

      }).catch((error) => {
        console.error(error);
        this.officialTableData = [];
        this.noData = true;
        this.$message.error("未能请求到数据");
      })
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getTableData()
    },
  },
  created() {

    if (this.showStatus === 'true') {
      this.editEnable = 'none'
    }
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 140;
    this.axios.get('/pmph/action/tag/selectBookSubTagTree').then((response) => {
      this.bookSubTagList = response.data
      this.getTableData()
    })
  },
  watch: {
    officialTableData(val) {
      for (let officialBook of val) {
        officialBook.categoryStr = []
        if (Array.isArray(officialBook.category)) {
          let cntTagList = this.bookSubTagList
          for (let item of officialBook.category) {
            let cntTag = cntTagList.find(tag => tag.id === item)
            officialBook.categoryStr.push(cntTag.name)
            cntTagList = cntTag.children
          }
        }
        officialBook.categoryStr = officialBook.categoryStr.join(" / ")
      }
    }
  },
}
</script>

<style scoped>

</style>
